import { ReactNode, useEffect, useState } from 'react';
import an58 from '@mmstudio/an000058';
import Header from './header';
import BaseLayout, { IMenu } from './baselayout';
import api from '../atoms/api';
import { Result as R1 } from './api/admin/menu/my.api';

function tree(data: ITbfdmenu, all: ITbfdmenu[]): IMenu {
	const children = all.filter((it) => {
		return it.pid === data.menuid;
	}).map((it) => {
		return tree(it, all);
	});
	return {
		key: data.menuid,
		label: data.name,
		icon: data.icon,
		url: data.url,
		children
	};
}

export default function Layout({
	children,
	pathname
}: {
	children: ReactNode;
	pathname: string;
}) {
	const [menus, setmenus] = useState([] as IMenu[]);
	useEffect(() => {
		void (async () => {
			const ret = await an58<R1>(api['/api/admin/menu/my'], 'get');
			setmenus(ret.filter((it) => {
				return !it.pid;
			}).map((it) => {
				return tree(it, ret);
			}));
		})();
	}, []);
	return <BaseLayout
		pathname={pathname}
		menus={menus}
		title='技创辅管理系统'
		leftWidth='14.2rem'
		logo={api['/api/sys/logo']}
		header={< Header />}
		headHeight='3.75rem'
	> {children}</BaseLayout >;
}
